<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素滚动事件</title>
    <style>
        /*body {*/
        /*    padding-top: 100px;*/
        /*    height: 3000px;*/
        /*}*/

        div {
            display: none; /* 显示隐藏, 默认先隐藏,下面JS设置里 控制条件显示 */
            overflow: scroll; /* 溢出:滚动, 这里是盒子里的文字多出来 有滚动条 */
            width: 200px; /* 宽高 */
            height: 200px;
            border: 1px solid #000; /* 边框线 */

            position: fixed; /*固定定位, 这里的定位是相对于整个页面*/
            top: 50px; /*定位 偏移量*/
            right: 300px;
        }
    </style>
</head>
<body>
<h3>元素滚动事件</h3>
<p>
    滚动条在滚动的时候持续触发的事件
</p>
<p>
    为什么要学？ <br>
    很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶
</p>
<p>事件名：scroll</p>
<pre style="font-size: 20px;">
监听整个页面滚动：
    // 页面滚动事件
    window.addEventListener('scroll', function () {
        // 执行的操作
    })
</pre>
<p>
    给 window 或 document 添加 scroll 事件 <br>
    监听某个元素的内部滚动直接给某个元素加即可
</p>
<hr>

<h3>页面滚动事件-获取位置</h3>
<p>
    scrollLeft(被卷去左侧)和scrollTop(被卷去头部) （属性） <br>
    获取被卷去的大小 <br>
    获取元素内容往左、往上滚出去看不到的距离 <br>
    这两个值是可读写
</p>
<p>
    注意: <br>
    尽量在scroll事件里面获取被卷去的距离 <br>
    document.documentElement HTML 文档返回对象为HTML元素
</p>
<hr>

<pre style="font-size: 20px;">
总结:
1. 被卷去的头部或者左侧用那个属性？是否可以读取和修改？
    scrollTop / scrollLeft
    可以读取，也可以修改（赋值）
2. 检测页面滚动的头部距离（被卷去的头部）用那个属性？
    document.documentElement.scrollTop
    document.documentElement.scrollTop = 值  (也可以赋值操作)
</pre>
<hr>

<h3>页面滚动事件-滚动到指定的坐标</h3>
<p>
    scrollTo() 方法可把内容滚动到指定的坐标
    语法：
    元素.scrollTo(x, y)
    示例: window.scrollTo(x, 100) // 移动页面Y轴,100像素位置
</p>
<hr>

<div>
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
</div>

<script>
    // 获取DOM元素
    const div盒子 = document.querySelector('div')
    // 页面滚动事件  scroll滚动事件.  这里是检查 div盒子 的滚动事件
    div盒子.addEventListener('scroll', function () {
        // scrollTop 是属性, 可以查看 卷去头部多少像素
        console.log(div盒子.scrollTop) // 控制台输出, 滚动进度条 看滚动了多少像素
    })


    // 页面滚动事件   window代表整个网页页面
    window.addEventListener('scroll', function () {

        // 获取html元素写法  document.documentElement
        console.log(document.documentElement)  // 输出控制台, 看信息输出的整个 html标签
        console.log(document.documentElement.scrollTop) // 控制台信息, 整个页面头部卷去了多少像素

        // 检查页面滚动了多少像素, 超过了 显示div盒子
        const 像素 = document.documentElement.scrollTop
        if (像素 >= 100) { // 判断是否卷去了100显示
            div盒子.style.display = 'block' // 盒子元素, 修改属性 显示:块级 (这里是显示可见)
        } else {
            div盒子.style.display = 'none' // 如果又小于100像素的头部滚动, 再次把盒子隐藏
        }
    })
</script>
</body>
</html>